<!DOCTYPE html>
<html>
<head>
	<title>bootstrap-treeview</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!--bootstrap基础引用 start-->
	<script type="text/javascript" src="../../public/bootstrap/jquery-3.1.1.min.js"></script>
	<link rel="stylesheet" href="../../public/bootstrap/bootstrap.min.css" >
	<script type="text/javascript" src="../../public/bootstrap/bootstrap.min.js"></script>
	<!--bootstrap基础引用 end-->
	<!--bootstrap-treeview start-->
	<link rel="stylesheet" type="text/css" href="../../public/plugins/bootstrap-treeview/bootstrap-treeview.min.css">
	<script type="text/javascript" src="../../public/plugins/bootstrap-treeview/bootstrap-treeview.js"></script>
	<!--bootstrap-treeview end-->
	<!--bootstrap-dialog start-->
	<link rel="stylesheet" type="text/css" href="../../public/plugins/bootstrap-dialog/bootstrap-dialog.min.css">
	<script type="text/javascript" src="../../public/plugins/bootstrap-dialog/bootstrap-dialog.min.js"></script>
	<!--bootstrap-dialog end-->
	<script type="text/javascript" src="../../public/javascripts/customPlugin.js"></script>
	<script type="text/javascript">
		$(function(){

			onLoad();

			BindEvent();
			 //页面加载
			 function onLoad()
			 {
		     	//渲染树
		     	$('#left-tree').treeview({
		     		data: getTree(),
		     		levels: 1,
		     		onNodeSelected:function(event, node){
		     			$('#editName').val(node.text);
		     		},
					showCheckbox:false//是否显示多选
				});   
		     }
		     //事件注册
		     function BindEvent()
		     {
		     	 //保存-新增
		     	 $("#Save").click(function () {
		     	 	$('#addOperation-dialog').modal('hide')
                                    //静态添加节点
                                    var parentNode = $('#left-tree').treeview('getSelected');
                                    var node = {
                                    	text: $('#addName').val()
                                    };
                                    $('#left-tree').treeview('addNode', [node, parentNode]);

                    });
		     	}
		     	//保存-编辑
		     	$('#Edit').click(function(){
		     		var node = $('#left-tree').treeview('getSelected');
					var newNode={
						text:$('#editName').val()
					};
				$('#left-tree').treeview('updateNode', [ node, newNode]);
		     	});



			//显示-添加
			$("#btnAdd").click(function(){
				var node = $('#left-tree').treeview('getSelected');
				if (node.length == 0) {
					$.showMsgText('请选择节点');
					return;
				}
				$('#addName').val('');
				$('#addOperation-dialog').modal('show');
				
			});
			//显示-编辑
			$("#btnEdit").click(function(){
				var node=$('#left-tree').treeview('getSelected');
				$('#editShow').show();

			});
			//删除
			$("#btnDel").click(function(){
				var node = $('#left-tree').treeview('getSelected');
				if (node.length == 0) {
					$.showMsgText('请选择节点');
					return;
				}
				  BootstrapDialog.confirm({
                        title: '提示',
                        message: '确定删除此节点?',
                        size: BootstrapDialog.SIZE_SMALL,
                        type: BootstrapDialog.TYPE_DEFAULT,
                        closable: true,
                        btnCancelLabel: '取消', 
                        btnOKLabel: '确定', 
                        callback: function (result) {
                            if(result)
                            {
                                del();
                            }
                        }
                    });
				  function del(){
				  	
					$('#left-tree').treeview('removeNode', [ node, { silent: true } ]);
				  }
				
			});
			$("#btnMove").click(function(){
				$.showMsgText('更新中...');
			});

			//获取树数据
			function getTree(){
			var tree = [
				{"id":"1",
				"content":"22RERER的",
				"username":"陈静",
				"status":1,
				"limit":null,
				"uid":"1234a",
				"articleId":"1",
				"types":1,
				"createTime":1545154,
				"pagesize":null,
				"nodes":[
						{"id":"3",
						"content":"ccvcxv时代大厦YYYYYYFFF哈哈",
						"username":"李绍武",
						"status":1,
						"limit":null,
						"uid":"e",
						"articleId":"1",
						"types":1,
						"createTime":94651231,
						"pagesize":null,
						"nodes":[],
						"bid":"1234a"}
						],
				 "bid":""}];  
				var tree = [{"id":"1","content":"22RERER的","username":"陈静","status":1,"limit":null,"uid":"1234a","articleId":"1","types":1,"createTime":1545154,"pagesize":null,"text":"陈静:22RERER的","nodes":[{"id":"3","content":"ccvcxv时代大厦YYYYYYFFF哈哈","username":"李绍武","status":1,"limit":null,"uid":"e","articleId":"1","types":1,"createTime":94651231,"pagesize":null,"text":"李绍武:ccvcxv时代大厦YYYYYYFFF哈哈","nodes":[],"bid":"1234a"}],"bid":""}]
				return tree;             
			}
			/*-----页面pannel内容区高度自适应 start-----*/
			$(window).resize(function () {
				setCenterHeight();
			});
			setCenterHeight();
			function setCenterHeight() {
				var height = $(window).height();
				var centerHight = height - 240;
				$(".right_centent").height(centerHight).css("overflow", "auto");
			}
			/*-----页面pannel内容区高度自适应 end-----*/
		});



	</script>
	 
</head>
<body style="padding: 10px;">

	<header class="container" style="margin-bottom: 35px;">
		<div class="row">
			<div class="col-md-12">
				<input id="btnAdd" class="btn btn-primary" type="button" value="添加节点">
				<input id="btnMove" class="btn btn-success" type="button" value="节点移动">
				<input id="btnDel" class="btn btn-danger" type="button" value="删除节点">
			</div>
		</div>
	</header>


	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<div class="panel panel-primary ">
					<div class="panel-heading">
						<h3 class="panel-title">科目树</h3>
					</div>
					<div class="panel-body right_centent" style="">
						<div id="left-tree"></div>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="panel panel-primary ">
					<div class="panel-heading">
						<h3 class="panel-title">编辑区</h3>
					</div>
					<!--编辑操作权限 start-->
                <div class="panel-body right_centent">
                <div  id="editShow">
                	<div>
                        <div class="input-group margin-t-5">
                            <span class="input-group-addon" >名称:</span>

                            <input id="editName" type="text"  class="form-control" />
                        </div>
                    </div>
                    <div style="margin-top: 10px;">
                        <input id="Edit" class="btn btn-primary" type="button" value="确定" />
                        <input id="Edit_cancel" class="btn btn-default" type="button" style="margin-left:80px;display:none;" value="取消" />
                    </div>
                </div>
                </div>
                <!--编辑操作权限 end-->
				</div>
			</div>
		</div>
	</div>
	<div>
		<!--弹出框 新增权限 start-->
		<div class="modal fade" id="addOperation-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">

				<div class="modal-content radius_5">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">新增</h4>
					</div>
					<div class="modal-body">
						<div group="" item="add">
							<div>
								<div class="input-group margin-t-5">
									<span class="input-group-addon">名称:</span>
									<input id="addName" type="text" class="form-control" />
								</div>

							</div>
						</div>

					</div>
					<div class="modal-footer">
						<button id="Save" type="button" class="btn btn-primary">保存</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

					</div>
				</div>


			</div>
		</div>
		<!--弹出框 新增权限 end-->
		 
	</div>
	

</body>
</html>